---
import '$styles/markprompt.css'

import { Image } from 'astro:assets'
import type { CollectionEntry } from 'astro:content'
import AppLayout from './AppLayout.astro'
import Logo from '$assets/logo/threlte-logo.png'
import LogoOnly from '$assets/logo/threlte-logo-only.png'
import LeftSidebar from '$components/Menu/LeftSidebar/LeftSidebar.astro'
import Socials from '$components/Socials/Socials.astro'
import RightSidebar from '$components/Menu/RightSidebar/RightSidebar.astro'
import MobileDocsNav from '$components/Menu/MobileDocsNav.svelte'
import { getLeftSidebarMenu } from '$components/Menu/LeftSidebar/getLeftSidebarMenu'
import Package from '$components/Icons/Package.astro'
import Book from '$components/Icons/Book.astro'
import Circles from '$components/Icons/Circles.astro'
import Search from '$components/Search/Search.svelte'
import Markprompt from '$components/Search/Markprompt'

export interface Props {
  title: string
  entry: CollectionEntry<'learn'> | CollectionEntry<'reference'>
}

const title = Astro.props.title

const sidebarMenu = await getLeftSidebarMenu()

const activeSidebarTab: 'learn' | 'reference' = Astro.url.pathname.startsWith('/docs/learn')
  ? 'learn'
  : 'reference'

const activeUrlPathName = Astro.url.pathname

const linkStyles = 'flex items-center gap-1 rounded-md text-faded hover:text-white group'
const activeLinkStyles = 'text-orange!'
---

<AppLayout {title}>
  <Markprompt client:only="preact" />
  <header
    class="border-b-orange/25 fixed z-40 mx-auto hidden h-[var(--docs-navbar-height)] w-full flex-row items-center justify-between gap-6 border-b bg-[#0A0F19] px-6 md:flex"
    transition:name="desktop_nav"
  >
    <div class="justify flex items-center justify-start gap-6 xl:gap-12">
      <a href="/">
        <Image
          src={Logo}
          alt="threlte logo"
          width={152}
          height={37}
          class="h-[37px] w-auto object-contain md:hidden lg:block"
          loading="eager"
        />
        <Image
          src={LogoOnly}
          alt="threlte logo"
          width={37}
          height={37}
          class="hidden h-[37px] w-[37px] object-contain md:block lg:hidden"
          loading="lazy"
        />
      </a>

      <div class="flex h-[30px] flex-row items-center justify-start gap-4 lg:gap-6">
        <a
          href="/docs/learn/getting-started/introduction"
          class:list={[linkStyles, activeUrlPathName.includes('/docs/learn') && activeLinkStyles]}
        >
          <Book class="hidden h-[16px] lg:block" />Learn
        </a>

        <a
          href="/docs/examples/examples"
          class:list={[
            linkStyles,
            activeUrlPathName.includes('/docs/examples') && activeLinkStyles
          ]}
        >
          <Circles class="hidden h-[16px] lg:block" />Examples
        </a>

        <div class="h-full w-px bg-gray-500/70"></div>

        <div class="relative flex items-center gap-6">
          <a
            href="/docs/reference/core/getting-started"
            class:list={[
              linkStyles,
              activeUrlPathName.includes('/docs/reference/core') && activeLinkStyles
            ]}
          >
            <Package class="hidden h-[16px] md:block" />core</a
          >
          <a
            href="/docs/reference/extras/getting-started"
            class:list={[
              linkStyles,
              activeUrlPathName.includes('/docs/reference/extras') && activeLinkStyles
            ]}
          >
            <Package class="hidden h-[16px] md:block" />extras</a
          >
          <a
            href="/docs/reference/gltf/getting-started"
            class:list={[
              linkStyles,
              activeUrlPathName.includes('/docs/reference/gltf') && activeLinkStyles
            ]}
          >
            <Package class="hidden h-[16px] md:block" />gltf</a
          >
          <a
            href="/docs/reference/rapier/getting-started"
            class:list={[
              linkStyles,
              activeUrlPathName.includes('/docs/reference/rapier') && activeLinkStyles
            ]}
          >
            <Package class="hidden h-[16px] md:block" />rapier</a
          >
          <a
            href="/docs/reference/theatre/getting-started"
            class:list={[
              linkStyles,
              activeUrlPathName.includes('/docs/reference/theatre') && activeLinkStyles
            ]}
          >
            <Package class="hidden h-[16px] md:block" />theatre</a
          >
          <a
            href="/docs/reference/xr/getting-started"
            class:list={[
              linkStyles,
              activeUrlPathName.includes('/docs/reference/xr') && activeLinkStyles
            ]}
          >
            <Package class="hidden h-[16px] md:block" />xr
          </a>
          <a
            href="/docs/reference/flex/getting-started"
            class:list={[
              linkStyles,
              activeUrlPathName.includes('/docs/reference/flex') && activeLinkStyles
            ]}
          >
            <Package class="hidden h-[16px] md:block" />flex
          </a>
          <a
            href="/docs/reference/studio/getting-started"
            class:list={[
              linkStyles,
              activeUrlPathName.includes('/docs/reference/studio') && activeLinkStyles
            ]}
            data-astro-prefetch
          >
            <Package class="hidden h-[16px] md:block" />studio
          </a>
        </div>
      </div>
    </div>

    <div class="flex flex-1 flex-row items-center justify-end gap-6">
      <div class="hidden max-w-[280px] flex-1 xl:flex">
        <Search client:media="(min-width: 1280px)" />
      </div>
    </div>
  </header>

  <MobileDocsNav
    client:media="(max-width: 768px)"
    {sidebarMenu}
    {activeSidebarTab}
    {activeUrlPathName}
  >
    <Image
      slot="logo"
      src={Logo}
      alt="threlte logo"
      width={152}
      height={37}
      class="h-[37px] w-auto"
    />

    <Socials slot="socials" />
  </MobileDocsNav>

  <main
    class="grid min-h-[66vh] md:grid-cols-[var(--left-sidebar-width)_1fr] lg:grid-cols-[var(--left-sidebar-width)_1fr_var(--right-sidebar-width)]"
  >
    <aside
      class="min-w-(--left-sidebar-width) fixed top-0 z-10 row-span-2 hidden h-[calc(100vh-var(--docs-navbar-height))] place-self-start justify-self-stretch overflow-hidden md:top-[var(--docs-navbar-height)] md:block lg:row-span-1"
      transition:name="left_sidebar"
    >
      <div class="mx-6 mb-6 mt-6 flex flex-1 flex-col gap-3 xl:hidden">
        <div class="lg:hidden">
          <Socials />
        </div>
        <Search client:media="(min-width: 768px) and (max-width: 1280px)" />
      </div>
      <LeftSidebar />
    </aside>

    <div
      class="col-start-2 w-full justify-self-center overflow-hidden overflow-x-auto px-6 pb-12 pt-6 md:overflow-x-visible"
    >
      <article class="[&_p]:text-faded [&_li]:text-faded markdown-content mx-auto max-w-5xl">
        <slot />
      </article>
    </div>

    <aside
      class="lg:top-(--docs-navbar-height) lg:w-(--right-sidebar-width) fixed right-0 top-0 z-10 row-span-2 hidden h-[calc(100vh-var(--docs-navbar-height))] place-self-start justify-self-stretch overflow-hidden lg:block"
      transition:name="right_sidebar"
    >
      <RightSidebar entry={Astro.props.entry}>
        <Socials />
      </RightSidebar>
    </aside>
  </main>
</AppLayout>
